<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p:dialog xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:pe="http://primefaces.org/ui/extensions"
	modal="true" width="600" height="360" resizable="false" 
	widgetVar="dialogAddCidade" id="dialogCidade" closable="false"
	appendToBody="true">
	
	<link type="text/css" rel="stylesheet" href="../../resources/css/style.css" />
	
	<f:facet name="header">
		<h:outputText value="Cadastrar Cidade" />
	</f:facet>
	
	<h:form id="formAddCidade" prependId="false" >
		<p:messages id="messageFormCidade"/>
		
		<h:panelGrid columns="1" style="padding:5px;">
			<h:outputText value="Código" />
			<p:inputText style="width:100px;" value="#{compraBean.newCidade.id}"  disabled="true" />
		</h:panelGrid>
		
		<h:panelGrid columns="2" style="padding:5px;">
			<h:outputText value="Cidade *" />
			<h:outputText value="DDD" />
			
			<p:inputText style="width:210px;" value="#{compraBean.newCidade.cidade}" required="true" requiredMessage="Informe a cidade." maxlength="30"/>
			<p:inputText style="width:100px;" value="#{compraBean.newCidade.ddd}" maxlength="3">
				<pe:keyFilter regEx="/[\d]/" />
			</p:inputText>
		</h:panelGrid>
		
		<h:panelGrid columns="3" style="padding:5px;" id="panelEstado">
			<h:outputText value="Estado *" />
			<h:outputText value="Sigla" />
			<h:outputText value="" />		
			
			<p:autoComplete id="inputEstadoCidade" var="estado" value="#{compraBean.newCidade.estado}" maxlength="30"
				itemLabel="#{estado.estado}" itemValue="#{estado}" size="50" required="true" requiredMessage="Selecione o estado"
				converter="estadoConverter" completeMethod="#{compraBean.getEstadoByQuery}">
				<p:ajax event="itemSelect" process="@this inputEstadoCidade" update="inputEstadoSigla inputEstadoPais inputEstadoPaisSigla inputEstadoPaisDdi"/>
			</p:autoComplete>
			
			<p:inputText style="width:100px;" disabled="true" value="#{compraBean.newCidade.estado.sigla}" id="inputEstadoSigla"/>
			<p:commandButton icon="ui-icon-search" style="height:24px;" actionListener="#{compraBean.openDialogListEstado}" process="@this" title="Selecionar estado"/>
		</h:panelGrid>
		
		<h:panelGrid columns="3" style="padding:5px;" id="panelPais">
			<h:outputText value="Pais" />
			<h:outputText value="Sigla" />
			<h:outputText value="DDI" />
			
			<p:inputText style="width:200px;" disabled="true" value="#{compraBean.newCidade.estado.pais.pais}" id="inputEstadoPais"/>
			<p:inputText style="width:100px;" disabled="true" value="#{compraBean.newCidade.estado.pais.sigla}" id="inputEstadoPaisSigla"/>
			<p:inputText style="width:100px;" disabled="true" value="#{compraBean.newCidade.estado.pais.ddi}" id="inputEstadoPaisDdi"/>
		</h:panelGrid>
		
		<div id="popup-buttons" style="padding-bottom: 10px;padding-right: 15px; padding-top: 10px; text-align: right;">
			<p:commandButton value="Salvar" style="height:28px;" actionListener="#{compraBean.saveCidadeFromDialog}" update="@this, messageFormCidade" icon="ui-icon-disk"/>
			<p:commandButton value="Cancelar" style="height:28px;" actionListener="#{compraBean.closeDialogAddCidade}" immediate="true" icon="ui-icon-cancel"/>
		</div>		
	</h:form>
</p:dialog>